import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import './shop.less'
import { reqcartlist, reqcartupdate, reqcartdel } from '../../request/api'
import { imgPre } from '../../request/http'
import { filterPrice } from '../../filters/index'
import { Toast } from 'antd-mobile'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actions, getAllchecked, getcartList, getTotails } from '../../store/mouble/shop'
class Shop extends Component {
  componentDidMount() {
   let {shopFn:{requestcartList}}=this.props
  //  购物车列表
   requestcartList()
  }
  render() {
    console.log(this.props);
    let { cartlist,all,totail,shopFn:{sum,sub,cartdel,changeOne,changeAll} } = this.props
    return (
      <div>
        <Header title={'购物车'} back></Header>
        <div className="shoplist">
          {
            cartlist.map((item, index) => {
              return (
                <div className="shopone" key={item.id}>
                  <div className='shop-img'>
                    <input type="checkbox" name="" id="" checked={item.checked} onChange={(e)=>{changeOne(e,index)}}/>
                    <img src={imgPre + item.img} alt="" />
                  </div>
                  <div className="info">
                    <h3>{item.goodsname}</h3>
                    <p>￥{filterPrice(item.price)} </p>
                    <button  onClick={()=>{sub(item.id,item.num)}}>-</button><b> {item.num} </b><button onClick={()=>{sum(item.id)}}>+</button>

                  </div>
                  <span className='del' onClick={()=>{cartdel(item.id)}}>删除</span>
                </div>

              )
            })
          }

          <div className='totals'>
            全选 <input type="checkbox" name='' checked={all} onChange={(e) =>changeAll(e)} />
            <span>合计:{totail}</span>

          </div>
        </div>
      </div>
    )
  }
}
const mapStateToProps = state => {
  return {
    cartlist: getcartList(state),
    all:getAllchecked(state),
    totail:getTotails(state)
  }
}
const mapDispatchToProps = dispatch => {
  return {
    shopFn: bindActionCreators(actions, dispatch)
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Shop)
